<template>
    <div class="w1200 hospital_detail_page">
        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item><nuxt-link to="/certification">查资质</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item><nuxt-link to="/certification?type=1">医院资质</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item>{{ oInfo.hospitalName }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 内容 开始 -->
        <div class="content mt20">

            <!-- 左侧内容 开始 -->
            <div class="left_box">




                <div class="activity_box mb20">

                    <div class="mt20 hospital_info">
                        <div class="avatar">
                            <li-image :src="oInfo.hospitalLogo" class="img" :alt="`${$cookies.get('city') || '全国'}${oInfo.hospitalName}资质`" />
                        </div>
                        <div class="info">
                            <h1 class="title">{{ oInfo.hospitalName }}</h1>
                            <div class="cell_list">
                                <div class="cell">
                                    <span class="name">法定代表人</span>
                                    <span>{{ oInfo.legalPerson }}</span>
                                </div>
                                <div class="cell">
                                    <span class="name">注册资本</span>
                                    <span>{{ oInfo.registeredCapital }}</span>
                                </div>
                                <div class="cell">
                                    <span class="name">成立时间</span>
                                    <span>{{ oInfo.establishDate }}</span>
                                </div>
                            </div>
                            <div class="address">
                                <i class="el-icon-location"></i>
                                <span>{{ oInfo.provinceName }}{{ oInfo.cityName }}{{ oInfo.districtName }}{{ oInfo.address
                                }}</span>
                            </div>
                        </div>
                    </div>

                    <TabMenus :list="tabbarList" @change="onTabbarChange" />

                    <!-- 营业执照 开始 -->
                    <div class="row_box" ref="tabbar_0">
                        <div class="row_head">营业执照</div>
                        <div class="row_content">
                            <div class="list_cell">
                                <div class="name">营业期限：</div>
                                <div class="txt">
                                    <span>{{ oInfo.businessTerm }}</span>
                                    <a href="javascript:void(0)" class="a_link"
                                        v-if="oInfo.businessLicense && oInfo.businessLicense.length"
                                        @click="previewImage(oInfo.businessLicense)">查看营业执照</a>
                                </div>
                            </div>
                            <div class="list_cell">
                                <div class="name">统一社会编码：</div>
                                <div class="txt">{{ oInfo.businessLicenseNumber }}</div>
                            </div>
                            <div class="list_cell">
                                <div class="name">法人：</div>
                                <div class="txt">{{ oInfo.legalPerson }}</div>
                            </div>
                            <div class="list_cell">
                                <div class="name">注册资金：</div>
                                <div class="txt">{{ oInfo.registeredCapital }}</div>
                            </div>
                            <div class="list_cell">
                                <div class="name">经营范围：</div>
                                <div class="txt" v-html="oInfo.businessScope"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 营业执照 end -->

                    <!-- 医疗许可证 开始 -->
                    <div class="row_box" ref="tabbar_1">
                        <div class="row_head">医疗许可证</div>
                        <div class="row_content">
                            <div class="list_cell">
                                <div class="name">证件有效期：</div>
                                <div class="txt">
                                    <span>{{ oInfo.licenseValidity }}</span>
                                    <a href="javascript:void(0)" class="a_link"
                                        v-if="oInfo.practiceLicense && oInfo.practiceLicense.length"
                                        @click="previewImage(oInfo.practiceLicense)">查看医疗许可证</a>
                                </div>
                            </div>
                            <div class="list_cell">
                                <div class="name">医院资质：</div>
                                <div class="txt">{{ oInfo.hospitalQualification }}</div>
                            </div>
                            <div class="list_cell">
                                <div class="name">诊疗科目：</div>
                                <div class="txt" v-html="oInfo.treatmentSubject"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 医疗许可证 end -->

                    <!-- 风险预警 开始 -->
                    <div class="row_box" ref="tabbar_2">
                        <div class="row_head">风险预警</div>
                        <div class="row_content">
                            <span class="div_tips">暂未上线，敬请期待</span>
                        </div>
                    </div>
                    <!-- 风险预警 end -->

                    <!-- 更多信息 开始 -->
                    <div class="row_box" ref="tabbar_3">
                        <div class="row_head">更多信息</div>
                        <div class="row_content">
                            <div class="outpatientIntroduce" v-html="oInfo.detailIntroduce"></div>
                        </div>
                    </div>
                    <!-- 更多信息 end -->

                </div>




            </div>
            <!-- 左侧内容 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 社区问题 开始 -->
                <div class="problem_box">
                    <div class="head">社区问题</div>
                    <div class="list_box">
                        <ListQuestion v-for="(item, index) in questionList" :key="`problem_${index}`" :info="item"
                            :index="index" />
                    </div>
                </div>
                <!-- 社区问题 end -->

                <!-- 机构入驻标准 开始 -->
                <SettleIn class="mt20" />
                <!-- 机构入驻标准 end -->

            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->


    </div>
</template>
<script>
import { Rate } from 'element-ui';
import TabMenus from '@/components/tabbar/index.vue'
import ListQuestion from '@/components/question/listCell.vue'
import SettleIn from '@/components/apply/settlein.vue'
import {
    IMAGEURL,
    GET_QUALIFICATION_HOSPITAL_INFO,
    FOLLOWED_HOSPITAL_INFO,
    GET_QUESTIONANSWER_SEARCH
} from "@/http/interface";
import { api as viewerApi } from "v-viewer";
import "viewerjs/dist/viewer.css";
export default {
    components: {
        [Rate.name]: Rate,
        TabMenus,
        ListQuestion,
        SettleIn
    },
    data() {
        return {
            tabbarList: [
                { name: '营业执照', id: 0 },
                { name: '医疗许可证', id: 1 },
                { name: '风险预警', id: 2 },
                { name: '更多信息', id: 3 },
            ],
            hospitalId: "",
            oInfo: {},
            hospital: {},
            appointment: {},
            surroundings: {},
            title: "",
            description: "",
            keywords: "",
            questionList: [],
            doctorList: [],
            commentsList: [],
            goodsList: [],
            totalScore: {}
        }
    },
    head() {
        return {
            title: this.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.keywords,
                },
                {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/inquire/hospital/${this.hospId}`
                }
            ],
            link:[
        {ref:'canonical',href:`${this.$domain}/hosp`}
      ]
        };
    },
    async asyncData({ query, $axios,params }) {

        let _params = { id: params.id };
        let res = await $axios.get(GET_QUALIFICATION_HOSPITAL_INFO, {
            params: _params,
        });
        console.log(res)

        let oInfo = res.data || {};

        // 社区问答
        let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
        let qbj = qes.data || {}
        let questionList = qbj.list || []

        return {
            oInfo,
            title: oInfo.seoTitle,
            keywords: oInfo.seoKeywords,
            description: oInfo.seoDescription,
            questionList,
            hospId:params.id
        };
    },
    methods: {

        // 动态获取className
        getClassName(index) {
            if (index % 3 == 0) {
                return ''
            }
            if (index % 3 == 1) {
                return 'blue'
            }
            if (index % 3 == 2) {
                return 'dark_blue'
            }
        },

        // 获取图片列表
        getImages(str) {
            if (!str) {
                return []
            }
            let list = str.split(',')
            console.log(list)
            return list;
        },

        // 监听菜单点击
        onTabbarChange(e) {
            let _dom = this.$refs['tabbar_' + e];
            if (_dom) {
                _dom.scrollIntoView();
            }
        },

        // 预览图片
        previewImage(arr) {
            let list = []
            arr.map(k => {
                let _path = `${IMAGEURL}${k}`
                list.push(_path);
            })
            viewerApi({
                images: list,
                options: {
                    zIndex: 99999,
                },
            });
        }

    }
}
</script>
<style lang="less" scoped>@import '/assets/styles/index/certification/hospital.less';</style>